<template>
  <div class="box">
    <div style="padding: 0 15px 10px;">
      <div>
        <el-input v-model="search" style="width: 220px;" placeholder="请输入文件名关键字"></el-input>
        <el-button  type="primary" style="float: right;font-size: 14px;" @click="getOpenFile">上传</el-button>
      </div>

    </div>
    <div style="margin: 0 10px 0 10px;" class="cardN">
      <div class="card1" v-for="(item, index) in dateList.filter((data) => (!search || data.title.toLowerCase().includes(search.toLowerCase())))" :key="index">
        <el-dropdown style="float: right;">
          <span class="el-dropdown-link">
            <div class="icon" style="cursor: pointer; padding: 0 10px;">
              <div></div>
              <div style="margin: 5px 0;"></div>
              <div></div>
            </div>
          </span>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item><span @click="upLoad(item)">下载</span></el-dropdown-item>
            <el-dropdown-item><span @click="deleDate(item)">删除</span></el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
        <div class="card-one" @click="preview(item)">
          <img style="width:80px;height: 80px;" :src="item.image" alt="">
          <el-tooltip class="item" effect="dark" :content="item.title + '.' + item.fileName.split('.')[item.fileName.split('.').length - 1]" placement="bottom">
            <p>{{ item.title }}{{ item.fileName | fileNamehz }}</p>
          </el-tooltip>
        </div>
        <div class="card-two">
          <span style="padding-left: 15px;">{{ item.uuser }}</span>
          <span style="padding-right: 15px; margin-left: 14px;">{{ item.utime }}</span>
        </div>
      </div>
    </div>
    <hu-modal :title="title == 1 ? '新增-操作指南文件' : '修改-操作指南文件'" :show-modal.sync="openDrawer" :loading="false" @submit="addForm">
      <el-form ref="formOwn" :model="formChart" :rules="rulesData" label-width="110px">
        <el-form-item label="标题" prop="title">
          <el-input v-model="formChart.title" placeholder="请输入标题"></el-input>
        </el-form-item>
        <el-form-item label="排序" prop="sort">
          <el-input v-model="formChart.sort" type="number" placeholder="请输入排序"></el-input>
        </el-form-item>
        <el-form-item label="状态" prop="isValid">
          <el-select    style="width: 100%" v-model="formChart.isValid" placeholder="请选择选择状态">
            <el-option v-for="dict in [
                { id: 1, name: '启用' },
                { id: 0, name: '禁用' },
              ]" :key="dict.id" :value="dict.id" :label="dict.name" />
          </el-select>
        </el-form-item>
        <el-form-item label="文件上传" prop="files">
          <f-upload :fileList="fileList" accept=".doc, .docx, .pdf, .jpg, .tif, .png, .xls, .xlsx, mp4" :limit="1" @change="resultFile" @remove="removeFile"></f-upload>
        </el-form-item>
      </el-form>
    </hu-modal>
  </div>
</template>

<script>
import * as http from "@/api/system/assistance.js";
export default {
  props: {},
  components: {},
  data() {
    return {
      activeNames: ["1"],
      search: "",
      pageNum: 1,
      pageSize: 999,
      dateList: [],
      fileList: [],
      rulesData: {
        title: [{ required: true, message: "标题不能为空", trigger: "blur" }],
        sort: [{ required: true, message: "排序不能为空", trigger: "blur" }],
        isValid: [
          { required: true, message: "状态不能为空", trigger: "change" },
        ],
        files: [{ required: true, message: "文件不能为空", trigger: "change" }],
      },
      openDrawer: false,
      title: 1,
      formChart: {
        sort: "1",
        isValid: 1,
      },
      srcUrl: "",
    };
  },
  created() {},
  mounted() {
    this.getList();
  },
  methods: {
    getList() {
      let params = {
        pageNum: this.pageNum,
        pageSize: this.pageSize,
      };
      http.getList(params).then((res) => {
        if (res.stateCode == 200) {
          this.dateList = res.result.records.map((e) => ({
            ...e,
            fileName: e.filesList[0] ? e.filesList[0].fileName : "",
          }));
          this.dateList.forEach((item, index) => {
            let format =
              item.fileName.split(".")[item.fileName.split(".").length - 1];
            if (format == "jpg" || format == "png") {
              this.$set(
                this.dateList[index],
                "image",
                require("@/assets/images/a5.png")
              );
            } else if (format == "ppt") {
              this.$set(
                this.dateList[index],
                "image",
                require("@/assets/images/a2.png")
              );
            } else if (
              format == "word" ||
              format == "doc" ||
              format == "docx"
            ) {
              this.$set(
                this.dateList[index],
                "image",
                require("@/assets/images/a3.png")
              );
            } else if (format == "png") {
              this.$set(
                this.dateList[index],
                "image",
                require("@/assets/images/a4.png")
              );
            } else if (format == "xls" || format == "xlsx") {
              this.$set(
                this.dateList[index],
                "image",
                require("@/assets/images/a6.png")
              );
            } else if (format == "pdf") {
              this.$set(
                this.dateList[index],
                "image",
                require("@/assets/images/a7.png")
              );
            } else {
              this.$set(
                this.dateList[index],
                "image",
                require("@/assets/images/a0.png")
              );
            }
          });
        }
      });
    },
    preview(item) {
      this.$download.preview(
        item.filesList[0].filePath,
        item.filesList[0].fileName
      );
    },
    getOpenFile() {
      this.reset();
      this.openDrawer = true;
    },
    reset() {
      this.formChart = {
        sort: "1",
        isValid: 1,
        files: [],
        delFileIds: [],
      };
      this.fileList = [];
      this.resetForm("formOwn");
    },
    addForm() {
      this.$refs["formOwn"].validate((valid) => {
        if (valid) {
          let formData = new FormData();
          for (const key in this.formChart) {
            if (this.formChart[key]) {
              if (key == "files") {
                this.formChart[key].forEach((element) => {
                  formData.append(key, element.raw);
                });
              } else if (key == "delFileIds") {
                if (this.formChart[key].length) {
                  formData.append(key, this.formChart[key].join(","));
                }
              } else {
                formData.append(key, this.formChart[key]);
              }
            }
          }
          http.addList(formData).then((res) => {
            if (res.stateCode == 200) {
              this.openDrawer = false;
              this.getList();
              this.$modal.msgSuccess("添加成功");
            }
          });
        } else {
          return false;
        }
      });
    },
    resultFile(arr) {
      this.formChart.files.push(arr[0]);
    },
    removeFile(arr) {
      if (!arr[0].raw) {
        this.formChart.delFileIds.push(arr[0].fileId);
      } else {
        this.$utils.findIndex(this.formChart.files, arr[0].uid, "uid");
      }
    },
    //下载
    upLoad(item) {
      this.$download.download(
        item.filesList[0].filePath,
        item.filesList[0].fileName
      );
    },
    //删除
    deleDate(item) {
      http.deleteList(item.id).then((res) => {
        if (res.stateCode == 200) {
          this.getList();
          this.$modal.msgSuccess("删除成功");
        }
      });
    },
    queryDate() {
      this.dateList.filter(
        (item) =>
          (!valueInput ||
            item.equipmentName
              .toLowerCase()
              .includes(valueInput.toLowerCase())) &&
          (!isValidItem || isValidItem === 0 || isValidItem === item.usable)
      );
    },
  },
  watch: {},
  filters: {
    fileNamehz(value) {
      return "." + value.split(".")[value.split(".").length - 1];
    },
  },
};
</script>

<style lang="scss" scoped>
.cardN {
  width: 100%;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  flex-wrap: wrap;
}
.card1 {
  height: 212px;
  background: #ffffff;
  border-radius: 12px;
  margin: 5px;

  .icon {
    float: right;
    margin: 10px 15px 0 0;

    div {
      display: block;
      width: 4px;
      height: 4px;
      border-radius: 50%;
      background-color: #ccc;
    }
  }

  .card-one {
    cursor: pointer;
    text-align: center;
    margin-top: 40px;

    p {
      width: 80%;
      font-size: 14px;
      color: #323232;
      margin: auto;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
  }

  .card-two {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 27px;

    span {
      font-size: 14px;
      color: #9d9d9d;
    }
  }
}
</style>
